<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
    <div class="container">
        <h1>日常信息记录</h1>
        <div class = "row" id="insertModule">
            <div class = "clear">
            <p >日期</p>
            <input  class = "col-md-3 col-sm-5" id="selectDateInput" type="date" name="selectDate" value = <?php echo date();?> >
            </div>

            <div class = "clear">
            <p>步数</p>
            <input class = "col-md-3 col-sm-5" id="walkStepsInput" type="number" name="walkSteps" value='10000' min='100'>
            </div>

            <div class = "clear">
            <p >力量锻炼</p>
            <input class = "col-md-3 col-sm-5" id="powerExerciseNumInput" type="number" name="powerExerciseNum" value='10' min='0'>
            </div>
            <div class = "clear">
            <button id="submitBtn" class="btn btn-default">提交</button>
            </div>
        </div>
        <div class = "row" id="disModule">
            <div>
                <button id ="queryBtn" class="btn btn-default" >查询</button>
            </div>
            <table id = "disTable" class = "table">
                <tr>
                    <th>日期</th>
                    <th>步数</th>
                    <th>举重次数</th>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script>
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            parseServerJson(JSON.parse(this.responseText));
        }
	
    };

	sendQueryReq();
    
$("#queryBtn").click(function() {
	sendQueryReq();
});

$("#submitBtn").click(function() {

    var currSelectDate = $("#selectDateInput").val();
    var currWalkSteps = $("#walkStepsInput").val();
    var currpowerExerciseNum = $("#powerExerciseNumInput").val();

    var newInsertRecord = {
        "cmd": "ClientApplyInsertRecord",
        "selectDate": currSelectDate,
        "walkSteps": currWalkSteps,
        "powerExerciseNum": currpowerExerciseNum
    };

    var newInsertRecordString = JSON.stringify(newInsertRecord);
    xhttp.open("POST", "./submit.php", true);
    xhttp.setRequestHeader("Content-type", "application/application/x-www-form-urlencoded");
    xhttp.send(newInsertRecordString);
});

//发生查询请求
function sendQueryReq()
{
    var newInsertRecord = {
        "cmd": "ClientApplyQueryRecord"
    };

    var newInsertRecordString = JSON.stringify(newInsertRecord);
    
    xhttp.open("POST", "./submit.php", true);
    xhttp.setRequestHeader("Content-type", "application/application/x-www-form-urlencoded");
    xhttp.send(newInsertRecordString);

}

//解释服务端返回的数据
function parseServerJson(serverJson) {
    var i ;
    var rowNum = 1;
    var currDisTable = document.getElementById("disTable");
    for ( i in serverJson)
    {
        if (serverJson[i].cmd == "ServerSendRecord")
        {
            if ( i < 5)
            {
                currDisTable.rows[rowNum].cells[0].innerHTML = serverJson[i].selectDate;
                currDisTable.rows[rowNum].cells[1].innerHTML = serverJson[i].walkSteps;
                currDisTable.rows[rowNum].cells[2].innerHTML = serverJson[i].powerExerciseNum;
            	rowNum++;
            }
        }
        else if (serverJson[i].cmd == "ServerStatus")
        {
        	if ( serverJson[i].status == "ServerStatusInsertOK")
        	{
        		sendQueryReq();
        		alert("添加成功");
        	}
        	else
        	{
        		alert("添加失败");
        	}
        }
    }
}
</script>

</html>
